<template>
  <div>
    <h2>Role List</h2>
    <ul>
      <li v-for="role in roles" :key="role.id">
        {{ role.name }}
        <button @click="editRole(role)">Edit</button>
        <button @click="deleteRole(role.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import roleService from '../services/roleService';

export default {
  data() {
    return {
      roles: []
    };
  },
  created() {
    this.loadRoles();
  },
  methods: {
    loadRoles() {
      roleService.getAllRoles()
        .then(response => {
          this.roles = response.data;
        })
        .catch(error => {
          console.error('Error loading roles:', error);
        });
    },
    editRole(role) {
      // Implement edit role logic
    },
    deleteRole(roleId) {
      roleService.deleteRole(roleId)
        .then(() => {
          this.loadRoles();
        })
        .catch(error => {
          console.error('Error deleting role:', error);
        });
    }
  }
};
</script>
